<template>
  <div class="infoWrapper">
    <div class="info">
      <div class="left">
        <div class="infoItem">
          <div>学年阶段：</div>
          <el-select v-model="version.activeItem" placeholder="学年阶段">
            <el-option
              v-for="item in version.data"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="content">
      <slot
        :tableData="tableData"
        :deleteInstructs="deleteInstructs"
        :refresh="refresh"
        :changeInstructOpenType="changeInstructOpenType"
      ></slot>
    </div>
  </div>
</template>
<script setup>
import {
  api_deleteWorkBookById,
  api_getAllWorkBook,
  api_getWorkBookByVersion,
} from "@/api/manage";
import { ElLoading, ElMessage } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import { ECenter, searchTypeData } from "../enum";

const props = defineProps({
  openDraw: Function,
  lastDownloadTime: String,
});

const version = reactive({
  data: [
    { label: "全部阶段", value: "7" },
    { label: "中小学", value: "2" },
    { label: "大学", value: "1" },
    { label: "中职", value: "4" },
  ],
  activeItem: "7",
});
const search = reactive({
  data: searchTypeData,
  activeItem: "instructName",
});
const instructSum = ref(0);
const searchInstructStr = ref("");
const tableData = ref([]);

const changeInstructOpenType = (id) => {
  tableData.value?.forEach((center) => {
    center.workBookInfoList?.forEach((book) => {
      if (book.id === id) {
        book.flag = book.flag === 0 ? 1 : 0;
      }
    });
  });
};

const refresh = () => {
  fetchByVersion({
    version: version.activeItem,
  });
};

defineExpose({ refresh });

onMounted(() => {
  // 通过Manage的mounted后调用此方法
  // refresh();
});
const fetchInstruct = async (d) => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "transparent",
  });
  if (d.version === "all") {
    delete d.version;
  }
  d.centerName = ECenter[d.centerName];

  try {
    const { data, success, msg } = await api_getAllWorkBook({});
    if (!success) {
      throw new Error("获取指令失败,接口返回:" + msg);
    }
    tableData.value = data;
  } catch (e) {
    ElMessage.error("获取数据失败");
  }
  loading.close();
};

const fetchByVersion = async (version) => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "transparent",
  });
  try {
    const { data, success, msg } = await api_getWorkBookByVersion(version);
    if (!success) {
      throw new Error("获取指令失败,接口返回:" + msg);
    }
    tableData.value = data;
  } catch (e) {
    ElMessage.error("获取数据失败");
  }
  loading.close();
};

const deleteInstructs = async (index, row) => {
  const r = await api_deleteWorkBookById({
    id: row.id,
  });
  if (r.success === true) {
    ElMessage.success(`${row.instructName}删除成功`);
    fetchByVersion({
      version: version.activeItem,
    });
  } else {
    ElMessage.error(
      `${row.instructName}指令(${row.instructCode})删除失败,接口返回:${r.msg}`
    );
  }
};

const emits = defineEmits(["visibleChange"]);

const searchInstruct = () => {
  refresh();
};
watch(
  () => version.activeItem,
  (newVal) => {
    fetchByVersion({
      version: newVal,
    });
  }
);
</script>

<style lang="scss" scoped>
.infoWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .info {
    margin: 15px 30px;
    display: flex;
    justify-content: space-between;
    :deep(.el-select) {
      width: 130px;
    }
    .infoItem {
      display: flex;
      align-items: center;
    }
    .infoItem + .infoItem {
      margin-left: 20px;
    }
    .left {
      display: flex;
    }
    .right {
      display: flex;
      .input {
        width: 350px;
      }
      .createBtn {
      }
    }
  }
  .content {
    flex: 1;
    min-height: 0;
  }
}
</style>
